<template>
  <div class="full-height full-width">
    <div>
      <select-sport-type></select-sport-type>
    </div>
    <div class="full-height full-width">
      <!-- 查询条件地区  -->
      <div class="col-12" style="height:30px;">
        <!-- 日期选择组件 -->
        <select-query-period
          :bgclass="'bg-panda-expand-bg-color'"
          @query_period_change="query_period_change"
          :show_show_more_query_btn="show_show_more_query_btn"
        ></select-query-period>
      </div>
    </div>
    <div>
      <div
        class="panda-table border-right bg-panda-base-dark border-top fixed fixed-left"
        style="width:300px;  box-shadow: 1px 0 0 0 rgba(0,0,0,0.50); top:91px;left:61px; z-index:5"
        :style="left_component_style"
      >
        <mini-match-list
          :editing_obj="show_right_detail_obj"
          @toedit="to_edit_and_show_right"
          :startTimeEnd="queryform_form.startTimeEnd"
          :startTimeFrom="queryform_form.startTimeFrom"
          :refresh_minilist="refresh_minilist"
        ></mini-match-list>
      </div>
      <div
        class="panda-table border-right border-top fixed fixed-left bg-panda-base-dark"
        v-if="show_match_edit"
        style="top:91px;left:361px;z-index:5"
        :style="middle_component_style"
      >
        <match-edit
          :editing_obj="show_right_detail_obj"
          @minilist_need_refresh="minilist_need_refresh"
          @close="match_edit_page_close"
        ></match-edit>
      </div>
      <div
        class="panda-table border-right bg-panda-base-dark border-top fixed fixed-left"
        v-if="show_open_edit"
        style="top:91px;left:361px; z-index:5"
        :style="middle_component_style"
      >
        <open-edit
          :editing_obj="show_right_detail_obj"
          @minilist_need_refresh="minilist_need_refresh"
          @close="match_edit_page_close"
        ></open-edit>
      </div>
    </div>

    <div
      class="fixed fixed-right bg-panda-base-dark panda-table border-left text-panda-text-light"
      v-if="showrightdetail==1"
      style="width:350px;  box-shadow: -1px 0 0 0 rgba(0,0,0,0.50);   top: 61px;  width: 350px; z-index:5"
      :style="right_component_style"
    >
      <right-info
        :right_detail_obj="show_right_detail_obj"
        :tablecolumns="tablecolumns"
        @toedit="to_show_match_edit"
      ></right-info>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.q-checkbox__inner {
  color: panda-text-light;
}
</style>
<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import tableColWidthmixin from "src/mixins/style/tableColWidth.js";
import matchmixin from "src/mixins/pages/match/match.js";
import match_manage_tabledata from "src/mock/match/match_manage.js";
import { tablecolumns_config } from "src/pages/match/manage/config/config.js";
import selectSportType from "src/components/query/selectSportType.vue";
import selectedTableItemMixin from "src/mixins/pages/match/selectedTableItem.js";
import dataSourceCode from "src/components/query/dataSourceCode.vue";
import selectQueryPeriod from "src/components/query/selectQueryPeriod.vue";
import matchStatusmixin from "src/mixins/pages/match/matchStatus.js";
import title from "src/mixins/header/title.js";

import matchManageMixin from "src/mixins/pages/match/matchManage.js";
import { dom } from "quasar";
const { height, width } = dom;
export default {
  mixins: [
    ...mixins,
    tableColWidthmixin,
    matchmixin,
    matchStatusmixin,
    matchManageMixin,
    selectedTableItemMixin,

    title
  ],
  components: {
    rightInfo: () => import("src/pages/match/manage/component/rightInfo.vue"),
    openEdit: () => import("src/pages/match/manage/component/openEdit.vue"),
    matchEdit: () => import("src/pages/match/manage/component/matchEdit.vue"),

    miniMatchList: () =>
      import("src/pages/match/manage/component/miniMatchList.vue"),
    selectSportType,
    dataSourceCode,
    selectQueryPeriod
  },
  data() {
    return {
      show_show_more_query_btn: false,
      queryform_form: {},
      queryform_module: {
        startTimeEnd: "",
        startTimeFrom: ""
      },
      refresh_minilist: 0,
      query_form_date_arr: [],
      match_id_state_arr: [
        { label: "全部", value: "100" },
        { label: "有联赛ID", value: "1" },
        { label: "无联赛ID", value: "2" }
      ],
      tab_name: "",
      tabletittle: "",
      show_right_detail_obj: {},
      tab2: "",
      show_match_edit: false,
      show_open_edit: false,
      tablecolumns: tablecolumns_config,
      tabledata: [],
      selected_item_pool_id_all: [],
      table_col_leagueName_color_map: ""
    };
  },
  watch: {
    $route(val) {
      this.init_tabledata();
    }
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    init_tabledata() {
      this.set_breadcrumbsPart4(["编辑管理"]);
      this.editing_obj_id = this.$route.query.editing_obj_id; // 获取单独id
      let n = this.$route.query.which_button;

      this.get_new_editing_obj(this.editing_obj_id).then(() => {
        if (n == 2) {
          this.show_open_edit = false;
          this.show_match_edit = true;
        } else if (n == 1) {
          this.show_match_edit = false;
          this.show_open_edit = true;
        }
      });
    },

    async get_new_editing_obj(id) {
      let params = {
        sportId: this.sportId,
        id: id
      };
      await api_match.post_matchManager_queryMatch(params).then(res => {
        let arr = this.$lodash.get(res, "data.data.records") || [];
        arr = this.rebuild_tabledata_to_needed(arr);
        if (arr[0]) {
          this.table_item_click(arr[0]);
        } else {
          this.table_item_click({});
        }
      });
    },

    query_period_change(val) {
      if (val) {
        console.log("  查询日期哦");
        console.log(val);
        this.queryform_form.startTimeFrom = val.startTimeFrom_history;
        this.queryform_form.startTimeEnd = val.startTimeEnd_history;
      }
    },

    to_edit_and_show_right(item) {
      this.table_item_click(item);
    },
    match_edit_page_close() {
      this.$router.push({
        name: "match_manage"
      });
    },

    table_item_click(item) {
      console.log(" table_item_click(item)");
      console.log(item);

      this.show_right_detail_obj = item;
    },

    compute_middle_component_style() {
      let we = this.window_size_info.width - 60 - 300;
      if (this.showrightdetail) {
        we -= 350;
      }
      let obj = {
        width: we + "px",
        maxWidth: we + "px",
        minWidth: 600 + "px"
      };
      let obj2 = this.compute_left_component_style();

      obj = Object.assign(obj2, obj);

      this.middle_component_style = obj;

      return obj;
    },
    compute_left_component_style() {
      let wh = this.window_size_info.height;
      let wc = wh - 36 - 60 - 30;
      let obj = {
        height: wc + "px",
        maxHeight: wc + "px"
      };
      this.left_component_style = obj;
      return obj;
    },
    compute_right_component_style() {
      let wh = this.window_size_info.height;
      let wc = wh - 36 - 30 - 30;
      let obj = {
        height: wc + "px",
        maxHeight: wc + "px"
      };
      this.right_component_style = obj;
      return obj;
    },

    minilist_need_refresh(val, id) {
      this.refresh_minilist = val;
      console.log(" 改变的 数据 的 技术ID");
      console.log(id);
      if (id) {
        this.editing_obj_id = id;
        this.get_new_editing_obj(id);
      }
    },
    to_show_match_edit(item) {
      console.log(item);

      this.table_item_click(item);
      this.set_breadcrumbsPart4(["编辑管理"]);

      this.show_open_edit = false;
      this.show_match_edit = true;
    },

    // 根据路由参数改变显示名字
    change_title_by_route(to, ctx) {
      if (to.query.which_button + "" === "1") {
        this.set_title("开盘管理");
      } else if (to.query.which_button + "" === "2") {
        this.set_title("对阵管理");
      }
    }
  },
  // 进入编辑页面头部标题显示与清除
  beforeRouteLeave(to, from, next) {
    this.set_title("");
    next();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.change_title_by_route(to, vm);
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.change_title_by_route(to, this);
    next();
  }
};
</script>
